<template>
  <div>
    <div v-if="ageData.length>0" ref="barCharts" v-loading="loading" style="width: 100%; height: 350px;" />
    <el-empty v-else description="暂无数据" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import semApi from '@/api/baidu'
export default {
  props: ['siteId'],
  data() {
    return {
      ageData: '',
      age: '',
      loading: false,
      site_id: ''
    }
  },
  watch: {
    siteId(val, value) {
      this.site_id = val
      if (this.site_id) {
        this.getAge()
      }
    }
  },
  created() {
    // this.data = this.echartInfo
    this.getAge()
  },
  mounted() {

  },
  methods: {
    // 用户年龄分步
    getAge() {
      this.loading = true
      semApi.ageList({ site_id: 14950244 }).then(res => {
        this.ageData = res.data
        this.$nextTick(() => {
          this.init()// 执行echarts
        })
        this.loading = false
      })
    },

    init() {
      var data1 = this.ageData

      var option = {

        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['18岁以下', '18-24岁', '25-34岁', '35-44岁', '45-54岁', '55岁以上'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            itemStyle: {
              barBorderRadius: [0, 0, 0, 0], // 圆角（左上、右上、右下、左下）
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                ['#fe8023', '#fab51e'].map((color, offset) => ({
                  color,
                  offset
                }))
              ) // 渐变
            },
            name: '年龄分布占比',
            type: 'bar',
            barWidth: '40%',
            data: data1
          }
        ]
      }
      var myEcharts = echarts.init(this.$refs.barCharts)
      myEcharts.setOption(option)
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    }
  }
}
</script>

<style scoped>

</style>
